<template>
  <div class="yxp-paper">
    <div class="yxp-paper-top">
      <img src="@/assets/word/paper-back-icon.png" class="yxp-paper-top-l" @click="handleBack"/>
      <div class="yxp-paper-top-r">
        <span @click="handleCheck">混组检查</span>
        <span @click="handleAgain">再查一遍</span>
      </div>
    </div>
    <div class="yxp-paper-list" v-if="data.status">
      <div class="yxp-paper-box" v-if="isCenter">
        <div class="yxp-paper-flex" id="box">
          <div class="yxp-paper-list-item" v-for="(item,i) in fillList" :key="'d' + i" :data-s="item.num"  :class="{active: item.num > 0 && curIndex === i}" @click.stop="handlePlay(item,i,1)">
            <div class="item-l">
              <img src="@/assets/word/success-normal.png" @click.stop="handleSuccess(item,i)"/>
              <span>{{item.word}}</span>
            </div>
            <div class="item-r">
              <span v-show="item.num === 2 && curIndex === i">{{item.translate}}</span>
              <img src="@/assets/word/error-normal.png" @click.stop="handleError(item,i)"/>
            </div>
          </div>
        </div>

         <!-- <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div>
         <div class="yxp-paper-list-item">1111</div> -->
        <!-- </div> -->
      </div>
    </div>
    <div class="yxp-paper-bottom">
      <div class="yes">
        <span class="num">{{yesNum}}</span>
        <span class="text">YES</span>
        <div class="again-list">
          <div class="again-list-item" v-for="n in this.dataList.length" :key="n">{{n}}</div>
        </div>
      </div>
      <div class="center" v-if="totalNum === 0">
        <span class="num">{{totalNum}}</span>
      </div>
      <div class="center" v-if="totalNum > 0" @click="handleCenter">
        <span class="num">{{totalNum}}</span>
      </div>
      <div class="no" v-if="noNum === 0">
        <span class="num">{{noNum}}</span>
        <span class="text">NO</span>
      </div>
       <div class="no" v-if="noNum > 0" @click="handleNo">
        <span class="num">{{noNum}}</span>
        <span class="text">NO</span>
      </div>
    </div>
    <div class="yxp-paper-pop" v-if="isShow">
      <img src="@/assets/word/close-icon.png" class="close" @click="isShow = false"/>
      <h3 class="title">请选择你要混合的组</h3>
      <div class="paper-pop-list">
        <div class="paper-pop-list-item" v-for="(item,i) in inintData" :Key="i + 'm'" @click="handleGroup(item)">
          <template v-if="item.status">
            <img src="@/assets/word/group.png" v-if="!item.isCheck"/>
            <img src="@/assets/word/group-sel.png" v-else/>
            <p class="text">第{{item.page}}组</p>
          </template>
        </div>
      </div>
      <div class="btn" @click="handleRemember">开始检查</div>
    </div>
    <div class="mark" v-if="!data.status || isBack || isShow"></div>
    <div class="paper-simulate-list" id="paper-list" v-if="!data.status">
      <div class="paper-simulate-list-item" v-for="(item,i) in dataList" :Key="item.id" :data-s="item.num" :class="{active: item.num > 0}" @click.stop="handlePlay(item,i,0)">
        <div class="paper-simulate-list-item-l">{{item.word}}</div>
        <div class="paper-simulate-list-item-r" v-show="item.num === 2" >{{item.translate}}</div>
        <div class="paper-simulate-list-item-draw" v-show="curIndex === i" :data-s="i + '---' + curIndex" @click.stop="handleSimulate(i)" :class="{'on': isSimulate}">
          <img src="@/assets/word/simulate.png" />
          <span></span>
        </div>
      </div>
    </div>
    <audio ref="audio"></audio>
    <div class="paper-simulate-back" v-if="isBack">
      <img src="@/assets/word/close-icon.png" class="close" @click="isBack = false" />
      <img src="@/assets/word/paper-pop.png" class="paper" />
      <p class="tips">确实要返回识记吗？</p>
      <div class="btn">
        <div class="btn-item" @click="handlePrev">返回识记</div>
        <div class="btn-item" @click="isBack = false">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import { randomArr } from '@/services/composition.js'
import { randWord } from '@/utils/rand.js'
export default {
  name: 'simulatePaper',
  data () {
    return {
      curIndex: 0,
      isShow: false,
      isFirst: false,
      isSimulate: false,
      isBack: false,
      item: '',
      totalNum: 0,
      yesNum: 0,
      noNum: 0,
      aniNum: 0,
      page: 1,
      data: [],
      inintData: [],
      noArr: [],
      delArr: [],
      dataList: [],
      selData: [],
      fillList: [],
      nowNum: 0,
      btn: true, // 默认点击事件
      isClick: false,
      timer: null,
      errorTimer: null,
      isErrorClick: false,
      isSuClick: false,
      isNoClick: false,
      date: '',
      audio: null,
      isCenter: true,
      aniArr: [],
      noData: [],
      iNow: 0
    }
  },
  created () {
    if (this.$route.query.page) {
      this.page = this.$route.query.page
    }
    let data = JSON.parse(window.localStorage.getItem('paperData'))
    this.inintData = data
    this.data = data[this.page - 1]
    let dataList = this.data.data
    dataList.map((item,i) => {
      item.num = 0
      this.aniArr.push(i)
    })
    this.selData = JSON.parse(JSON.stringify(dataList))
    this.dataList = dataList
    if (this.data.status) {
      this.totalNum = this.data.data.length
    }
  },
  mounted () {
    this.audio = this.$refs.audio
  },
  methods: {
    handleSimulate (i) {
      if (this.btn) {
        this.btn = false
        this.isSimulate = true
        setTimeout(() => {
          this.isSimulate = false
          this.getAnimation(i)
        }, 1500)
      }
      
    },
    getAnimation (index) {
      const item = document.getElementsByClassName('paper-simulate-list-item')
      item[index].style.transform = 'scale(.1)'
      item[index].style.top = '800px'
      item[index].style.opacity = 0
      this.audio.src = 'https://data.e-school-kids.com/webcourse/word_in.mp3'
      this.audio.play()
       if (this.aniArr.indexOf(index) > -1) {
         let n = this.aniArr.indexOf(index)
         this.aniArr.splice(n,1)
       }
       setTimeout(() => {
         
        if (this.aniArr.indexOf(index - 1) > -1) {
          this.curIndex = index - 1
        } else {
          this.curIndex = this.aniArr[0]
        }
        for (let i = 0; i < this.aniArr.length; i++) {
          let step = i * 7.5 - 0.0625 * i
          item[this.aniArr[i]].style.top = step + 'rem'
          item[this.aniArr[i]].style.opacity = 1
          item[this.aniArr[i]].style.trasnition = 'all 1s ease-out'
        }
        this.totalNum++
        this.btn = true
        if (this.totalNum === this.dataList.length ) {
          this.$set(this.data, 'status', true)
          this.inintData[this.page - 1] = this.data
          window.localStorage.setItem('paperData', JSON.stringify(this.inintData))
       }
       },500)
       
    },
    handleSuccess (elem,index) {
      if (this.isSuClick) {
        clearTimeout(this.isSuClick)
        return
      }
      this.isSuClick = true
      
      let dom = document.getElementsByClassName('yxp-paper-list-item')
      dom[index].style.transform = 'translate(-250px,680px) scale(.1)'
      dom[index].style.bottom =  '0px'
      dom[index].style.opacity = 0
      dom[index].style.zIndex = 3000
      dom[index].style.transition = 'all .8s cubic-bezier(1,.07,.05,.85)'
      // if (this.delArr.indexOf(index) > -1) {
      //   let n = this.delArr.indexOf(index)
      //   this.delArr.splice(n,1)
        
      // }
      // if (this.noArr.indexOf(index) > -1) {
      //   let k = this.noArr.indexOf(index)
      //   this.noArr.splice(k,1)
      // }
      this.yesNum++
     setTimeout(() => {
       this.fillList.splice(index,1)
       this.$nextTick(() => {
         if (this.fillList.length <= 5) {
           console.log(888888)
          for (let i = 0; i < this.fillList.length; i++) {
            console.log(99999 + '----' + this.fillList.length)
            let step = 120 * (this.fillList.length -1 - i) + (this.fillList.length - 1 - i) * 20
            dom[i].style.position = 'absolute'
            dom[i].style.transform = 'translateY(0) scale(1)'
            dom[i].style.bottom = step + 'px'
            dom[i].style.opacity = 1
            dom[i].style.transition = 'all .6s cubic-bezier(1,.07,.05,.85)'
          }
      } else {
        dom[index].style.transform = 'tanslateY(0) scale(1)'
        dom[index].style.opacity = 1
      }
      this.audio.src = 'https://data.e-school-kids.com/webcourse/word_in.mp3'
      this.audio.play()
       })
        
      
        this.isSuClick = false
      }, 600)
    },
    handleError (elem,index) {
      console.log(index + '&&&&')
      if (this.isErrorClick) {
        clearTimeout(this.isErrorClick)
        return
      }
      this.isErrorClick = true
      if (this.noArr.indexOf(index) === -1) {
        this.noArr.push(index)
      }
      //this.dataList.splice(index,1)
      // if (this.delArr.indexOf(index) > -1) {
      //   let n = this.delArr.indexOf(index)
      //   this.delArr.splice(n,1)
      // }
      let dom = document.getElementsByClassName('yxp-paper-list-item')
      dom[index].style.transform = 'translate(250px,680px) scale(.1)'
      dom[index].style.opacity = 0
      dom[index].style.transition = 'all .8s cubic-bezier(1,.07,.05,.85)'
     setTimeout(() => {
       this.noNum++
         console.log(this.fillList[index])
         this.noData.push(this.fillList[index])
          this.fillList.splice(index,1)
          console.log(this.noData)
        this.$nextTick(() => {
          if (this.fillList.length <= 5) {
          for (let i = 0; i < this.fillList.length; i++) {
            let step = 120 * (this.fillList.length -1 - i) + (this.fillList.length - 1 - i) * 20
            dom[i].style.position = 'absolute'
            dom[i].style.transform = 'translateY(0) scale(1)'
            dom[i].style.bottom = step + 'px'
            dom[i].style.opacity = 1
            dom[i].style.transition = 'all .8s cubic-bezier(1,.07,.05,.85)'
          }
          this.audio.src = 'https://data.e-school-kids.com/webcourse/word_in.mp3'
          this.audio.play()
        } else {
          dom[index].style.transform = 'tanslateY(0) scale(1)'
          dom[index].style.opacity = 1
        }
        })
        this.isErrorClick = false
      }, 600)
    },
    handleCenter () {
      console.log(this.nowNum + '(())')
      if (this.isClick) {
        clearTimeout(this.isClick)
        return
      }
      this.isClick = true
      this.fillList.map(item => {
        item.num = 0
      })
      
      // if (this.delArr.indexOf(this.nowNum) === -1) {
        this.delArr.push(this.nowNum)
        this.fillList.push(this.dataList[this.nowNum])
      // }
      this.$nextTick(() => {
        const dom = document.getElementsByClassName('yxp-paper-list-item')
        if (this.fillList.length * 120 > 660) {
          dom[this.nowNum].style.transform = 'translateY(0) scale(1)'
          dom[this.nowNum].style.opacity = 1
          dom[this.nowNum].style.transition = 'all .8s cubic-bezier(1,.07,.05,.85)'
          this.audio.src = this.fillList[this.nowNum].project_voice
          this.audio.play()
        } else {
          setTimeout(() => {
             for (let i = 0; i < this.fillList.length; i++) {
          let step = 120 * (this.fillList.length -1 - i) + (this.fillList.length - 1 - i) * 20
          dom[i].style.position = 'absolute'
          dom[i].style.transform = 'translateY(0) scale(1)'
          dom[i].style.bottom = step + 'px'
          dom[i].style.opacity = 1
          dom[i].style.transition = 'all .8s cubic-bezier(1,.07,.05,.85)'
          this.audio.src = this.fillList[i].project_voice
          this.audio.play()
          }
          }, 500)
        }
      this.errorTimer = setTimeout(() => {
          this.totalNum--
          console.log(this.totalNum)
          this.nowNum++
          if (this.fillList.length * 120 > 660) {
            document.getElementById("box").scrollTop = this.nowNum * 130 - 660
            for (let i = 0; i < dom.length; i++) {
              dom[i].style.position = 'relative'
              dom[i].style.bottom = ''
              dom[i].style.transition = ''
              
            }
            
          }
          
          if (this.totalNum === 0) {
            this.nowNum = 0
          }
          this.isClick = false
        }, 0)
      })
     
     },
    handleNo () {
      if (this.isNoClick) {
        clearTimeout(this.isNoClick)
        return
      }
      this.isNoClick = true
      this.noData.map(item => {
        item.num = 0
      })
       this.fillList.push(this.noData[0])
       this.noData.splice(0,1)
       console.log("====" + this.iNow)
       console.log(this.fillList)
       console.log("====")
      this.$nextTick(() => {
        const dom = document.getElementsByClassName('yxp-paper-list-item')
        if (this.fillList.length * 120 > 660) {
          dom[this.iNow].style.transform = 'translateY(0) scale(1)'
          dom[this.iNow].style.opacity = 1
          dom[this.iNow].style.transition = 'all .8s cubic-bezier(1,.07,.05,.85)'
          this.audio.src = this.fillList[this.iNow].project_voice
          this.audio.play()
        } else {
          for (let i = 0; i < this.fillList.length; i++) {
          let step = 120 * (this.fillList.length -1 - i) + (this.fillList.length - 1 - i) * 20
          dom[i].style.position = 'absolute'
          dom[i].style.transform = 'translateY(0) scale(1)'
          dom[i].style.bottom = step + 'px'
          dom[i].style.opacity = 1
          dom[i].style.transition = 'all .8s cubic-bezier(1,.07,.05,.85)'
          this.audio.src = this.fillList[i].project_voice
          this.audio.play()
        }
      }
      this.errorTimer = setTimeout(() => {
          this.noNum--
          this.iNow++
          
          if (this.fillList.length * 120 > 660) {
            document.getElementById("box").scrollTop = this.iNow * 130 - 660
            for (let i = 0; i < dom.length; i++) {
              dom[i].style.position = 'relative'
              dom[i].style.bottom = ''
              dom[i].style.transition = ''
            }
            
          }
          
          if (this.noNum === 0) {
            this.iNow = 0
            this.noData = []
          }
          this.isNoClick = false
        
        }, 500)
      })
    },
    handleBack () {
      if (this.data.status) {
        if (this.noNum > 0 || this.totalNum > 0 || this.yesNum < this.dataList.length) {
          this.$toast('您还有未检测完的纸条')
          return
        }
      } else {
        if (this.totalNum < this.dataList.length - 1) {
          this.$toast('完成剪纸条才可以退出哦~')
          return
        }
      }
      
      this.isBack = true
    },
    handlePrev () {
      this.$router.go(-1)
    },
    // 再查一遍
    handleAgain () {
      if (this.totalNum === 0 && this.noNum === 0 && this.yesNum === this.dataList.length) {
       let item = document.getElementsByClassName('again-list-item')
       for (let i = 0; i < item.length; i++) {
         item[i].style.transform = 'translateX(250px) scale(.2)'
         item[i].style.opacity = 1
         item[i].style.transition = '.8s ease-out ' + i * .1 + 's'
       }
       this.totalNum = item.length
       this.nowNum = 0
       
       let dataList = JSON.stringify(randWord(this.dataList))
       randomArr({ type: dataList }).then(res => {
        if (res.code === 1) {
          this.dataList = JSON.parse(res.data)
          this.totalNum = this.dataList.length
          this.nowNum = 0
          console.log(this.dataList)
          this.isShow = false
          this.fillList = []
          this.yesNum = 0
        }
      })
      } else {
        this.$toast('您还有未检测完的纸条')
      }
    },
    // 播放语音
    handlePlay (item, i, type) {
      let num = item.num
      num++
      if (num > 2) num = 1
      item.num = num
      if (type === 0) {
        this.$set(this.dataList, i, item)
      } else {
        this.$set(this.fillList, i, item)
      }
      this.audio.src = item.project_voice
      this.audio.play()
      if (type === 0) {
        this.dataList.map((elem,index) => {
          if (index !== i) {
            this.$set(elem, 'num', 0)
          }
        })
      } else {
        this.curIndex = i
        this.fillList.map((elem,index) => {
          if (index !== i) {
            this.$set(elem, 'num', 0)
          }
        })
      }
      
      console.log(this.dataList)
    },
    // 混组检查
    handleCheck () {
      if (this.totalNum > 0 || this.yesNum < this.dataList.length) {
        this.$toast('您还有未检测完的纸条')
        return
      }
      if (this.noNum > 0 && this.totalNum === 0) {
        this.$toast('不会的词还没学完哦')
        return
      }
      let data = JSON.parse(window.localStorage.getItem('paperData'))
      let res = data.filter(item => {
        return item.status === true
      })
      if (res.length < 2) {
        this.$toast('只学了一组单词，没有其他单词可以混合哦~')
        return
      }
      this.isShow = true
      this.nowNum = 0
      this.delArr = []
      this.fillList = []
    },
    handleGroup (item) {
      let check = item.isCheck ? false : true
      this.$set(item, 'isCheck', check)
    },
    handleRemember () {
      let data = []
      this.fillList = []
      this.inintData.map(item => {
        if (item.isCheck && item.status) {
          item.data.map(elem => {
            data.push(elem)
          })
        }
      })
      let dataList = JSON.stringify(randWord(data))
      randomArr({ type: dataList }).then(res => {
        if (res.code === 1) {
          this.dataList = JSON.parse(res.data)
          this.totalNum = this.dataList.length
          this.nowNum = 0
          this.yesNum = 0
          console.log(this.dataList)
          this.isShow = false
        }
      })
      
    }
  }
}
</script> 
<style lang="less" scoped>
@keyframes start {
  0% {
    transform: translateY(800px) scale(.2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes move {
  0% {
    transform: translateX(0) rotateX(0);
  }
  100% {
    transform: translateX(735px) rotateX(5deg);
  }
}
@keyframes identifier {
  0% {
    transform: translateY(0) scale(1) rotateX(15deg)
  }
  100% {
    transform: translateY(600px) scale(0.2) rotate(0)
  }
}
.yxp-paper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:radial-gradient(circle,rgba(23,162,125,1) 0%,rgba(7,113,85,1) 100%);
  overflow: hidden;
  &-top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 1200;
    &-l {
      position: absolute;
      left: 40px;
      top: 27px;
      width: 30px;
      height: 27px;
      cursor: pointer;
    }
    &-r {
      position: absolute;
      right: 40px;
      top: 27px;
      cursor: pointer;
      span {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #fff;
        cursor: pointer;
        &:first-child {
          margin-right: 50px;
        }
      }
    }
  }
  &-list {
    position: relative;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 120px;
    margin: 0 auto;
    &::-webkit-scrollbar { width: 0 !important }
    .active {
      .item-l {
        span {
          font-size: 30px;
          font-weight: bold;
        }
      }
      .item-r {
        span {
          font-size: 24px;
          font-weight: 400;
        }
      }
    }
    .yxp-paper-box {
      width: 650px;
      height: 660px;
      // background: #ff0000;
      overflow: hidden;
      margin: 0 auto;
      
    }
    .yxp-paper-flex {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: auto;
     // transition: all .8s cubic-bezier(1,.07,.05,.85);
      &::-webkit-scrollbar { width: 0 !important }
    }
    &-item {
      // position: absolute;
      left: 50%;
      margin-left: -300px;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 600px;
      height: 100px;
      background: #fff;
      border-radius: 10px;
      // margin-left: -300px;
      margin-bottom: 20px;
      transform: scale(.1);
      opacity: 0.3;
      // transition: all .8s cubic-bezier(1,.07,.05,.85);
      .item-l,.item-r {
        img {
          width: 30px;
          height: 30px;
        }
        span {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }
      .item-l {
        display: flex;
        align-items: center;
        img {
          margin-left: 27px;
          margin-right: 40px;
        }
      }
      .item-r {
        img {
          margin-right: 27px;
          margin-left: 40px;
        }
      }
    }
  }
  &-bottom {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 809px;
    height: 87.5px;
    background: url('../../assets/word/paper-bottom.png') no-repeat;
    background-size: 100% 100%;
    z-index: 10;
    .yes {
      position:absolute;
      left: 151px;
      top: 27px;
      width: 88px;
      height: 53px;
      background: url(../../assets/word/paper-yes.png) no-repeat;
      background-size: 100% 100%;
      z-index: 10;
      cursor: pointer;
      .num {
        font-size: 20px;
        font-family: MicrosoftYaHei-Bold;
        color: #006042;
      }
      .text {
        display: block;
        color: #F8F8F8;
        font-size: 12px;
        font-family: MicrosoftYaHei-Bold;
      }
      .again-list {
        position: absolute;
        left: -4px;
        top: 10px;
        z-index: 11;
        &-item {
          position: absolute;
          left: 0;
          top: 0;
          width: 100px;
          height: 20px;
          background: #fff;
          opacity: 0
        }
      }
    }
    .center {
      position: absolute;
      left: 342px;
      top: 16px;
      width: 113px;
      height: 64px;
      background: url(../../assets/word/paper-center.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 10;
      .num {
        position: absolute;
        left: 50%;
        top: -8px;
        transform: translateX(-50%);
        color: #A04D0E;
        font-size: 30px;
        font-family: MicrosoftYaHei-Bold;
      }
    }
    .no {
      position: absolute;
      right: 149px;
      top: 27px;
      width: 89px;
      height: 53px;
      background: url(../../assets/word/paper-no.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 10;
      .num {
        color: #BA0620;
        font-size: 20px;
        font-family: MicrosoftYaHei-Bold;
      }
      .text {
        display: block;
        color: #F8F8F8;
        font-size: 12px;
        font-family: MicrosoftYaHei-Bold;
      }
    }
  }
  &-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 480px;
    height: 580px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    z-index: 1200;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .title {
      color: #333333;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      padding-top: 41px;
    }
    .paper-pop-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 47px;
      padding-left: 67px;
      padding-right: 67px;
      .paper-pop-list-item {
        margin-right: 50px;
        margin-bottom: 33px;
        cursor: pointer;
        img {
          width: 80px;
          height: 48px;
        }
        .text {
          color: #A0A0A0;
          font-size: 20px;
          font-family: Microsoft YaHei;
        }
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
    .btn {
        width: 350px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        margin: 7px auto 0;
        cursor: pointer;
    }
  }
  .paper-simulate-back {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 360px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    padding-bottom: 40px;
    z-index: 1100;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .paper {
      display: inline-block;
      width: 280px;
      height: 200px;
      margin: 50px auto 30px;
    }
    .tips {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333;
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      &-item {
        width: 130px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        cursor: pointer;
        &:first-child {
          margin-right: 20px;
        }
      }
    }
  }
}
.paper-simulate-list {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 600px;
  height: 600px;
  z-index: 1100;
  .active {
    .paper-simulate-list-item-l {
      font-size: 30px;
      font-weight: bold;
    }
    .paper-simulate-list-item-r {
      font-size: 24px;
      font-weight: 400;
    }
  }
  .down {
    animation: identifier .8s ease 3s;
  }
  &-item {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 119px;
    background: #fff;
    border-bottom: 1px dotted #C3C3C3;
    transition: all 1s ease-out;
    &:last-child {
      border: none;
    }
    .on {
      animation: move 1.5s ease-out;
      animation-fill-mode: forwards;
    }
    &-draw {
      position: absolute;
      left: -132px;
      top: 82px;
      img {
        width: 94px;
        height: 80px;
      }
      span {
        display: inline-block;
        width: 42px;
        height: 1px;
        // border-bottom: 1px dotted #ff0000;
      }
    }
    &-l {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000;
      padding-left: 70px;
    }
    &-r {
      padding-right: 70px;
    }
    &:nth-child(1) {
      top: 0;
    }
    &:nth-child(2) {
      top: 119px;
    }
    &:nth-child(3) {
      top: 238px;
    }
    &:nth-child(4) {
      top: 357px;
    }
    &:nth-child(5) {
      top: 476px;
    }
  }
  
}
</style>
